<template>
  <div id="personPayDetail">
    <div class="title"></div>
    <div class="content">
      <div class="setting_page" v-if="personPayDetail">
        <div class="title">Run Payroll:{{$route.query.scheduleName}}<span v-touch-ripple class="close_icon" @click="$router.back()">X</span></div>
        <div class="content">
          <!--顶部的详情-->
          <div class="info">
            <el-row class="total_info">
              <el-col :span="12">
                <div>Pay To</div>
                <div>{{personPayDetail.personName}}</div>
              </el-col>
              <el-col :span="4" :offset="8">
                <div>Net Pay</div>
                <div>{{personPayDetail.unit+personPayDetail.netPay}}</div>
              </el-col>
            </el-row>
            <el-row class="other_info">
              <el-col :span="5" style="border-right: 1px #ddd solid">
                <label class="label">Employee Address</label>
                <div class="value">{{personPayDetail.homeAddress}}</div>
              </el-col>
              <el-col :span="4" :offset="1">
                <label class="label">Pay Period</label>
                <div class="value" v-if="personPayDetail.payPeriodStart&&personPayDetail.payPeriodEnd">{{personPayDetail.payPeriodStart}} to {{personPayDetail.payPeriodEnd}} </div>
              </el-col>
              <el-col :span="3" :offset="1">
                <label class="label">Pay Date</label>
                <div class="value">{{personPayDetail.payDate?personPayDetail.payDate:""}}</div>
              </el-col>
              <el-col :span="4" :offset="1">
                <label class="label">Pay From</label>
                <div class="value">{{personPayDetail.payFrom}}</div>
              </el-col>
              <el-col :span="4" :offset="1">
                <label class="label">Paid By</label>
                <div class="value">{{personPayDetail.paidBy}}({{personPayDetail.unit+personPayDetail.netPay}})</div>
              </el-col>
            </el-row>
          </div>
          <!--折叠列-->
          <el-collapse class="collapse"  v-model="activeNames" @change="collapseHandleChange">
            <el-collapse-item title="Pay" name="1" >
              <el-table v-if="payTableData" ref="payTableData" :data="personPayDetail.pay" border emptyText="no data">
                <el-table-column label="TYPE" prop="type"></el-table-column>
                <el-table-column label="HOUR" prop="hour"></el-table-column>
                <el-table-column label="RATE" prop="rate"></el-table-column>
                <el-table-column label="CURRENT" prop="current"></el-table-column>
                <el-table-column label="YTD" prop="ytd"></el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="Employee taxes" name="2">
              <el-table v-if="payTableData" ref="payTableData" :data="personPayDetail.employeeTax" border emptyText="no data">
                <el-table-column label="TYPE" prop="type"></el-table-column>
                <el-table-column label="CURRENT" prop="current"></el-table-column>
                <el-table-column label="YTD" prop="ytd"></el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="Employee deductions" name="3">
              <el-table v-if="payTableData" ref="payTableData" :data="personPayDetail.employeeDedu" border emptyText="no data">
                <el-table-column label="TYPE" prop="type"></el-table-column>
                <el-table-column label="CURRENT" prop="current"></el-table-column>
                <el-table-column label="YTD" prop="ytd"></el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="Employer taxes" name="4">
              <el-table v-if="payTableData" ref="payTableData" :data="personPayDetail.employerTax" border emptyText="no data">
                <el-table-column label="TYPE" prop="type"></el-table-column>
                <el-table-column label="CURRENT" prop="current"></el-table-column>
                <el-table-column label="YTD" prop="ytd"></el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="Company-paid contributions" name="5">
              <el-table v-if="payTableData" ref="payTableData" :data="personPayDetail.employerDedu" border emptyText="no data">
                <el-table-column label="TYPE" prop="type"></el-table-column>
                <el-table-column label="CURRENT" prop="current"></el-table-column>
                <el-table-column label="YTD" prop="ytd"></el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
          <!--备注-->
          <div class="memo">
            <label class="label">Memo</label>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="please input something ..."
              v-model="memo">
            </el-input>
          </div>
        </div>
        <div class="btn_group">
          <el-button @click="$router.back()">Cancel</el-button>
          <el-button type="primary" @click = "next">Ok</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    components:{
    },
    data:function(){
      return{
        activeNames:[],
        payTableData:[],
        memo:null
      }
    },
    computed:{
      personPayDetail(){
          return this.$store.getters.calculatePayDetail;
      }
    },
    watch:{

    },
    created:function(){
      var route = this.$route;
      var param ={
        personId:route.query.personId,
        periodStart:route.query.periodStart,
        periodEnd:route.query.periodEnd,
        scheduleId:route.params.id
      }
      this.$store.dispatch('getCalculatePayDetail',param)
    },
    activated:function () {
     /* var route = this.$route;
      var param ={
        personId:route.query.personId,
        periodStart:route.query.periodStart,
        periodEnd:route.query.periodEnd,
        scheduleId:route.params.id
      }
     this.$store.dispatch('getCalculatePayDetail',param)*/
    },
    mounted:function(){

    },
    methods:{
      back:function(){
        this.$router.push('/payRoll/payRollCenter')
      },
      next:function(){
        var personIds = this.$route.query.personId;
        var periodStart = this.$route.query.periodStart;
        var periodEnd = this.$route.query.periodEnd;
        var scheduleName = this.$route.query.scheduleName;
        var scheduleId = this.$route.params.id;
        this.$router.push('/payRoll/payRollCenter/PayScheduleInfoEdit/previewPay/'+scheduleId+'?personIds='+personIds+'&periodStart='+periodStart+'&periodEnd='+periodEnd+'&scheduleName='+scheduleName);
      },
      collapseHandleChange(){

      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
  #personPayDetail{
    >.content{
      padding: 0;
    }
  }
  .setting_page {
    min-height: 100%;
    background-color: #fff;
    z-index: 1000;
    transition: all .3s;
    overflow: hidden;
    .title {
      line-height: 40px;
      background-color: #ddd;
      padding: 0 12px;
      .close_icon {
        float: right;;
        cursor: pointer;
      }
    }
    .content {
      .info{
        .total_info{
          height: 100px;
          line-height: 40px;
          padding: 10px 40px;
          background: $activeColor;
          color: #fff;
          font-size: 18px;
        }
        .other_info{
          padding: 10px 40px;
          .label{
            display: block;
            font-weight: bold;
          }
          .value{
            font-size: 14px;
            line-height: 20px;
            padding: 10px 0;
          }
        }
      }
      .collapse{
        padding: 0 20px;
        border: 0;
        .el-collapse-item__header{
          font-weight: bold;
        }
      }
      .memo{
        padding: 10px 40px;
        .label{
          line-height: 40px;
          font-weight: bold;
        }
      }
    }
    .btn_group{
      padding: 20px 40px ;
    }
  }
</style>
